<template>
  <div>
    <!-- 调用封装的面包屑组件 -->
    <MyBreadCrumb
      title="权限管理"
      path="permission"
    ></MyBreadCrumb>
    <!-- 用户权限设置列表 -->
    <el-table
      :data="adminList"
      stripe
      border
    >
      <el-table-column
        prop="_id"
        label="_id"
      ></el-table-column>
      <el-table-column
        prop="username"
        label="用户名"
      ></el-table-column>
      <el-table-column
        label="操作"
        align="center"
      >
        <!-- slot-scopde作用域插槽  子组件传参到父组件 -->
        <template slot-scope="scope">
          <el-button
            type="danger"
            size="mini"
            @click="setPermisstion(scope.$index, scope.row)"
          >设置权限</el-button>
          <!-- <el-popconfirm
            title="确认删除商品吗？"
            @confirm="handleDelete(scope.$index, scope.row)"
          >
            <el-button
              size="mini"
              type="danger"
              slot="reference"
            >删除</el-button>
          </el-popconfirm> -->

        </template>
      </el-table-column>
    </el-table>
    <!-- 设置权限的弹出框 -->
    <el-dialog
      title="权限设置"
      :visible.sync="centerDialogVisible"
      width="50%"
      center
    >
      <span style="font-size:20px;font-weight:bold">{{dialogText}}</span>
      <el-transfer
        v-model="value"
        :data="data"
        :titles="['全部权限', '拥有权限']"
      ></el-transfer>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="savePermission"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import url from '@/config/url'
export default {
  /**
   *  1、获取用户列表
   *
   *
   */
  data() {
    return {
      adminList: [],
      // 弹出框状态
      centerDialogVisible: false,
      // 弹出框显示的内容
      dialogText: '',
      // 全部权限
      data: [
        {
          key: '/admin/dashboard',
          label: '控制台'
        },
        {
          key: '/admin/banner',
          label: '轮播管理'
        },
        {
          key: '/admin/user',
          label: '用户管理'
        },
        {
          key: '/admin/goods',
          label: '商品管理'
        },
        {
          key: '/admin/permission',
          label: '权限管理'
        }
      ],
      // 拥有的权限
      // value: ['/admin/dashboard']
      value: [],
      // 用户_id
      id: ''
    }
  },
  created() {
    this.loadAdminList()
  },
  methods: {
    // 加载管理员用户列表
    loadAdminList() {
      this.$http.get(url.adminList).then((res) => {
        // console.log(res)
        this.adminList = res.data.data
      })
    },
    // 设置权限
    setPermisstion(index, row) {
      this.centerDialogVisible = true
      // 显示设置当前用户的权限提示信息
      this.dialogText = `设置用户【${row.username}】权限`
      // 将设置的当前用户_id进行保存
      this.id = row._id
      // 遍历返回的acl权限列表 并显示到已有权限的穿梭框中
      // console.log(this.adminList[index].acl)
      let tmp = []
      this.adminList[index].acl.forEach((item) => {
        tmp.push(item.path)
      })
      this.value = tmp
    },
    // 保存权限
    savePermission() {
      // console.log(this.value)
      // 组合权限数据的格式
      // [
      //   {
      //     name: '控制台',
      //     path: '/admin/dashboard'
      //   }
      // ]
      let tmp = []
      this.value.forEach((item) => {
        let obj = {}
        this.data.forEach((item1) => {
          if (item === item1.key) {
            obj.name = item1.label
          }
        })
        obj.path = item
        tmp.push(obj)
      })
      console.log(tmp)
      let putData = {
        _id: this.id,
        permissionList: tmp
      }
      // 请求服务端接口保存管理员用户的权限
      this.$http.put(url.permission, putData).then((res) => {
        // 关闭弹出框
        this.centerDialogVisible = false
        // 修改后,重新获取管理员列表
        this.loadAdminList()
        let type = res.data.code === 0 ? 'success' : 'error'
        this.$message({
          message: res.data.msg,
          type: type,
          duration: 700
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>